<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="echarts.js"></script>

	</head>
	<body>
		<!-- 修改后，点击提交按钮触发方法，ajax调用接口 -->
	        <table align="center" bordercolor="#000000" border="2" cellspacing="0" cellpadding="5" bgcolor="white"> 
	            <caption><h1><font color="red">股票K线查询系统</font></h1></caption>
	            <tr>
	                <td>股票代码：</td>
	                <td><input type="text" id="ID" name="ID" placeholder="请输入股票代码"></td>
	                <td><button type="submit" onclick="resetData()" name="sub" >提交</button></td>
	            </tr>
			</table>
        <br/>

		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	 	<div id="div_1" style="width: 1000px;height:500px;margin:0 auto"></div>
	</body>
</html>

<script>
	// from表单提交
	function resetData(){
		console.log("进入resetData")
		// 1日期 2开盘 3收盘 4涨跌 5涨跌百分比 6最低 7最高 8买入 9卖出
		var rawData = '' // 数据
		var dates = [] // 数据xAxis
		var data = [] // 数据series
		var myChartNew = echarts.init(document.getElementById("div_1"))
		var myChartOption = myChartNew.getOption();
		$.ajax({
			type: "GET",//方法类型
			//dataType: "json",//预期服务器返回的数据类型
			url: "http://127.0.0.1:5000/stock?ID=" + $("#ID").val(),//url	
			data: '',
			success: function (result) {
				alert("SUCCESS");
				
				rawData = eval(result).reverse()  // xxx更换
				console.log(rawData)
				
				var myChart = echarts.init(document.getElementById("div_1"))
			    function calculateMA(dayCount, data) {
				     var result = [];
				     for (var i = 0, len = data.length; i < len; i++) {
				         if (i < dayCount) {
				             result.push('-');
				             continue;
				         }
				         var sum = 0;
				         for (var j = 0; j < dayCount; j++) {
				             sum += data[i - j][1];
				         }
				         result.push(sum / dayCount);
				     }
				     return result;
				 }

				 var dates = rawData.map(function(item) {
				     return item[0];
				 });

				 var data = rawData.map(function(item) {
				     return [+item[1], +item[2], +item[5], +item[6]];
				 });
				 console.log(data)
				 var option = {
				     backgroundColor: '#21202D',
				     legend: {
				         data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
				         inactiveColor: '#777',
				         textStyle: {
				             color: '#fff'
				         }
				     },
				     tooltip: {
				         trigger: 'axis',
				         axisPointer: {
				             animation: false,
				             type: 'cross',
				             lineStyle: {
				                 color: '#376df4',
				                 width: 2,
				                 opacity: 1
				             }
				         }
				     },
				     xAxis: {
				         type: 'category',
				         data: dates,
				         axisLine: {
				             lineStyle: {
				                 color: '#8392A5'
				             }
				         }
				     },
				     yAxis: {
				         scale: true,
				         axisLine: {
				             lineStyle: {
				                 color: '#8392A5'
				             }
				         },
				         splitLine: {
				             show: false
				         }
				     },
				     grid: {
				         bottom: 80,
				         right: 30
				     },
				     dataZoom: [{
				         textStyle: {
				             color: '#8392A5'
				         },
				         handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
				         handleSize: '80%',
				         dataBackground: {
				             areaStyle: {
				                 color: '#8392A5'
				             },
				             lineStyle: {
				                 opacity: 0.8,
				                 color: '#8392A5'
				             }
				         },
				         handleStyle: {
				             color: '#fff',
				             shadowBlur: 3,
				             shadowColor: 'rgba(0, 0, 0, 0.6)',
				             shadowOffsetX: 2,
				             shadowOffsetY: 2
				         }
				     }, {
				         type: 'inside'
				     }],
				     animation: false,
				     series: [{
				             type: 'candlestick',
				             name: '日K',
				             data: data,
				             itemStyle: {
				                 normal: {
				                     color: '#FD1050',
				                     color0: '#0CF49B',
				                     borderColor: '#FD1050',
				                     borderColor0: '#0CF49B'
				                 }
				             }
				         },
				         {
				             name: 'MA5',
				             type: 'line',
				             data: calculateMA(5, data),
				             smooth: true,
				             showSymbol: false,
				             lineStyle: {
				                 normal: {
				                     width: 1
				                 }
				             }
				         },
				         {
				             name: 'MA10',
				             type: 'line',
				             data: calculateMA(10, data),
				             smooth: true,
				             showSymbol: false,
				             lineStyle: {
				                 normal: {
				                     width: 1
				                 }
				             }
				         },
				         {
				             name: 'MA20',
				             type: 'line',
				             data: calculateMA(20, data),
				             smooth: true,
				             showSymbol: false,
				             lineStyle: {
				                 normal: {
				                     width: 1
				                 }
				             }
				         },
				         {
				             name: 'MA30',
				             type: 'line',
				             data: calculateMA(30, data),
				             smooth: true,
				             showSymbol: false,
				             lineStyle: {
				                 normal: {
				                     width: 1
				                 }
				             }
				         }
				     ]
				 };
				//结束
	 			myChart.setOption(option)
			},
			error : function() {
				alert("异常！");
			}
		});
	}
</script>